<template>
    <div>
    <div class="shopcart">
        <div class="content" @click="toggLeList">
            <div class="conent-left">
                <div class="logo-wrapper">
                    <div class="logo" :class="{'highlight':totalCount>0}">
                        <i class="icon-shopping_cart"></i>
                    </div>
                    <div class="num" v-show="totalCount>0">{{totalCount}}</div>
                </div>
                <div class="price" :class="{'highlight':totalCount>0}">￥{{totalPrice}}元</div>
                <div class="desc">另需配送费{{deliveryPrice}}元</div>
            </div>
            <div class="conent-rigth" @click.stop.prevent="pay">
                <div class="pay" :class="{highlight:payDesc=='去结算'}">{{payDesc}}</div>
            </div>
        </div>
        <div class="ball-container">
                <div v-for="ball of balls" :key="ball.id">
                    <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                        <div class="ball" v-show="ball.show">
                            <div class="inner inner-hook">

                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        <transition name="fold">
        <div class="shopcart-list" v-show="listShow">
            <div class="list-header">
                <h1 class="title">购物车</h1>
                <span class="empty" @click="empty">清空</span>
            </div>
            <div class="list-content" ref="listContent">
                <ul>
                    <li class="food border-1px" v-for="food in selectFoods">
                       <span class="name">{{food.name}}</span>
                        <div class="price">
                            <span>￥{{food.price*food.count}}</span>
                        </div>
                        <div class="cartcontrol-wrapper">
                            <cartcontrol :food="food"></cartcontrol>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        </transition>
        </div>
    <transition name="fade">
    <div class="list-mask" v-show="listShow" @click="hideList"></div>
    </transition>
    </div>
</template>

<script>
import Cartcontrol from "./cartcontrol";
import BSbetter from "better-scroll";

export default {
  components: { Cartcontrol },
  name: "shopcart",
  props: {
    deliveryPrice: {
      type: Number
    },
    minPrice: {
      type: Number
    },
    selectFoods: {
      type: Array,
      default() {
        return [
          {
            price: 0,
            count: 0
          }
        ];
      }
    }
  },
  data() {
    return {
      balls: [
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        }
      ],
      dropBalls: [],
      fold: true
    };
  },
  methods: {
    drop(el) {
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i];
        if (!ball.show) {
          ball.show = true;
          ball.el = el;
          this.dropBalls.push(ball);
          return;
        }
      }
    },
    beforeDrop(el) {
      let count = this.balls.length;
      while (count--) {
        let ball = this.balls[count];
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect();
          let x = rect.left - 32;
          let y = -(window.innerHeight - rect.top - 22);
          el.style.display = "";
          el.style.webkitTransform = `translate3d(0,${y}px,0)`;
          el.style.transform = `translate3d(0,${y}px,0)`;
          let inner = el.getElementsByClassName("inner-hook")[0];
          inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
          inner.style.transform = `translate3d(${x}px,0,0)`;
        }
      }
    },
    dropping(el, done) {
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight;
      this.$nextTick(() => {
        el.style.webkitTransform = "translate3d(0,0,0)";
        el.style.transform = "translate3d(0,0,0)";
        let inner = el.getElementsByClassName("inner-hook")[0];
        inner.style.webkitTransform = "translate3d(0,0,0)";
        inner.style.transform = "translate3d(0,0,0)";
        el.addEventListener("transitionend", done);
      });
    },
    afterDrop(el) {
      let ball = this.dropBalls.shift();
      if (ball) {
        ball.show = false;
        el.style.display = "none";
      }
    },
    toggLeList() {
      if (!this.totalCount) {
        return;
      }
      this.fold = !this.fold;
      console.log(11);
    },
    empty() {
      this.selectFoods.forEach(food => {
        food.count = 0;
      });
    },
    hideList() {
      this.flod = true;
    },
    pay() {
      if (this.totalPrice < this.minPrice) {
        return;
      }
      window.alert(`支付${this.totalPrice}元`);
    }
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.selectFoods.forEach(food => {
        total += food.price * food.count;
      });
      return total;
    },
    totalCount() {
      let count = 0;
      this.selectFoods.forEach(food => {
        count += food.count;
      });
      return count;
    },
    payDesc() {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}元起送`;
      } else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice;
        return `还差${diff}起送`;
      } else if (this.totalPrice >= this.minPrice) {
        return `去结算`;
      }
    },
    listShow() {
      if (!this.totalCount) {
        this.fold = true;
        console.log(222);
        return false;
      }
      let show = !this.fold;
      if (show) {
        console.log(this.$refs.listContent);
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BSbetter(this.$refs.listContent, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      }
      return show;
    }
  }
};
</script>

<style lang="stylus">
    @import "../assets/css/mixin.styl"
.shopcart
    position fixed
    left 0
    bottom 0
    z-index 50
    width 100%
    height 48px
    .content
      display flex
      background-color #141d27
      font-size 0
      .conent-left
         flex 1
         .logo-wrapper
            display inline-block
            position relative
            top:-10px
            margin 0 12px
            padding 6px
            width 56px
            height 56px
            box-sizing border-box
            vertical-align top
            border-radius 50%
            background-color #141d27
            .logo
               width 100%
               height 100%
               border-radius 50%
               text-align center
               background-color #2b343c
               color #80858a
               .icon-shopping_cart
                  line-height 44px
                  font-size 24px
            .highlight
               background-color #00a0dc
               color #fff

            .num
               position absolute
               top:0
               right 0
               width 24px
               height 16px
               text-align center
               line-height 16px
               border-radius 16px
               font-size 9px
               font-weight 700
               background-color #f01414
               box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
               color #fff


          .price
             display inline-block
             vertical-align top
             margin-top 12px
             line-height 24px
             box-sizing border-box
             padding-right 12px;
             border-right 1px solid rgba(255,255,255,.1)
             font-size 16px
             font-weight  700
             &.highlight
               color #fff
               font-size 18px

         .desc
             display inline-block
             vertical-align top
             margin 12px 0 0 12px
             line-height 24px
             color: rgba(255,255,255,.4)
             font-size 10px
      .conent-rigth
         width 105px
         .pay
           height 48px
           line-height 48px
           text-align center
           font-size 12px
           font-weight 700
           color rgba(255,255,255,.4)
           background-color #2b333b
           &.highlight
            background-color #00b43c
            color #fff
    .ball-container
        .ball
            position: fixed
            left: 32px
            bottom: 22px
            z-index: 200
            transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
            .inner
                width: 16px
                height: 16px
                border-radius: 50%
                background: rgb(0, 160, 220)
                transition: all 0.4s linear
    .shopcart-list
      position absolute
      top:0
      left 0
      z-index -1
      width 100%
      transform translate3d(0,-100%,0)
      &.fold-enter-active, &.fold-leave-active
        transition  all 0.5s
        transform translate3d(0,-100%,0)
      &.fold-enter, &.fold-leave-to
        transform translate3d(0,0,0)
      .list-header
          height: 40px
          line-height 40px
          padding 0 18px
          background-color #f3f5f7
          border-bottom 1px solid rgba(7,17,27,.1)
          .title
             float left
          .empty
             float right
             font-size 12px
             color rgb(0,160,220)
      .list-content
          padding:0 18px
          max-height 217px
          background-color #fff
          overflow hidden
          .food
            position relative
            padding 12px 0
            box-sizing border-box
            border-1px(rgba(7,17,27,.1))
            .name
               line-height 24px
               font-size 14px
               color rgb(7,17,27)
            .price
                position absolute
                right 90px
                bottom:12px
                line-height 24px
                font-size 14px
                font-weight 700
                color rgb(240,20,20)
            .cartcontrol-wrapper
                position absolute
                right 0
                bottom 6px



.list-mask
    position fixed
    top 0
    left 0
    width: 100%
    height: 100%
    z-index 40
    background-color rgba(7,17,27,.6)
    -webkit-backdrop-filter blur(10px)
    &.fade-enter-active, &.fade-leave-active
      transition all 0.5s
      opacity 1
      background-color rgba(7,17,27,.6)
    &.fade-enter, &.fade-leave-to
      opacity 0
      background-color rgba(7,17,27,0)
</style>
